<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试模拟 - InterviewAI</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 动态背景 -->
    <div class="bg-animation">
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
        <div class="floating-shape"></div>
    </div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="index.html" class="navbar-brand">InterviewAI</a>
            
            <ul class="navbar-nav">
                <li><a href="index.html">控制台</a></li>
                <li><a href="resume.html">简历优化</a></li>
                <li><a href="interview.html" class="active">面试模拟</a></li>
                <li><a href="profile.html">成长报告</a></li>
            </ul>
            
            <div class="navbar-actions">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索功能、模板...">
                    <span class="search-icon">🔍</span>
                </div>
                
                <button class="theme-toggle" onclick="toggleTheme()" title="切换主题">
                    <span class="icon">🌙</span>
                </button>
                
                <button class="icon-btn">
                    <span>🔔</span>
                    <span class="notification-badge"></span>
                </button>
                
                <div class="user-avatar">A</div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="main-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">AI面试模拟</h1>
            <p class="page-subtitle">智能问答 · 实时反馈 · 全面提升</p>
            <div class="page-meta">目标岗位: <span class="info-badge">Java开发工程师</span></div>
        </div>

        <!-- 面试信息栏 -->
        <div class="card" style="margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div class="chat-info" style="color: var(--text-primary);">
                    面试官: 李总监 | 技术面试 | 用时: <span id="interview-timer">15分钟</span>
                </div>
                <div style="display: flex; gap: 8px;">
                    <button class="btn btn-secondary" onclick="showMessage('面试设置功能开发中', 'info')">设置</button>
                    <div class="info-badge warning">进行中</div>
                    <div class="info-badge success">当前得分: 88分</div>
                    <button class="btn btn-text" onclick="confirmEndInterview()" style="color: var(--error);">结束面试</button>
                </div>
            </div>
        </div>

        <!-- 聊天容器 -->
        <div class="chat-container">
            <!-- 聊天头部 -->
            <div class="chat-header">
                <div style="display: flex; align-items: center; gap: 8px;">
                    <div class="message-avatar">🤖</div>
                    <div>
                        <div style="font-weight: 600; color: var(--text-primary);">AI面试官 - 李总监</div>
                        <div class="chat-info">技术面试官，专注Java后端开发</div>
                    </div>
                </div>
                <div class="chat-info">在线</div>
            </div>

            <!-- 聊天消息区域 -->
            <div class="chat-messages" id="chat-messages">
                <!-- 欢迎消息 -->
                <div class="message bot">
                    <div class="message-avatar">🤖</div>
                    <div class="message-content">
                        您好！欢迎来到面试模拟，我是面试官李总监。今天我们来进行一场Java开发工程师的技术面试。请先做一个简单的自我介绍吧。
                    </div>
                </div>

                <!-- 示例对话 -->
                <div class="message user">
                    <div class="message-avatar">👤</div>
                    <div class="message-content">
                        您好李总监！我是张三，有5年Java开发经验，主要负责电商平台的后端开发工作，熟悉Spring Boot微服务架构。
                    </div>
                </div>

                <div class="message bot">
                    <div class="message-avatar">🤖</div>
                    <div class="message-content">
                        很好！能详细说说你在电商平台项目中具体负责哪些模块吗？遇到过什么技术难点？
                    </div>
                </div>

                <div class="message user">
                    <div class="message-avatar">👤</div>
                    <div class="message-content">
                        我主要负责订单管理和支付模块的开发。最大的技术难点是在双11期间处理高并发订单，通过引入Redis缓存和消息队列优化了系统性能。
                    </div>
                </div>

                <div class="message bot">
                    <div class="message-avatar">🤖</div>
                    <div class="message-content">
                        非常好的实践！能具体说说你是如何使用Redis和消息队列来解决高并发问题的吗？比如缓存策略和消息队列的选型？
                    </div>
                </div>
            </div>

            <!-- 聊天输入区域 -->
            <div class="chat-input-area">
                <!-- 反馈提示（动态显示） -->
                <!-- <div class="feedback-tip">
                    💡 本题得分: 78分 | 建议: 可以补充具体的解决方案和性能数据
                </div> -->

                <div class="chat-input-group">
                    <input type="text" class="chat-input" id="chat-input" placeholder="输入您的回答...">
                    <button class="icon-btn" id="voice-input" title="语音输入">
                        🎤
                    </button>
                    <button class="btn btn-primary" id="send-message">发送</button>
                </div>

                <!-- 快捷回复建议 -->
                <div style="margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap;">
                    <button class="btn btn-text" onclick="insertQuickReply('我需要思考一下...')" style="font-size: 12px; padding: 4px 8px;">
                        💭 我需要思考一下
                    </button>
                    <button class="btn btn-text" onclick="insertQuickReply('能再详细解释一下这个问题吗？')" style="font-size: 12px; padding: 4px 8px;">
                        ❓ 请再详细解释一下
                    </button>
                    <button class="btn btn-text" onclick="insertQuickReply('这个问题很有意思，让我来分析一下...')" style="font-size: 12px; padding: 4px 8px;">
                        🤔 让我来分析一下
                    </button>
                </div>
            </div>
        </div>

        <!-- 面试进度和得分 -->
        <div style="margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
            <!-- 面试进度 -->
            <div class="card">
                <h3 class="card-title">面试进度</h3>
                
                <div style="margin-bottom: 16px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--text-primary);">
                        <span>整体进度</span>
                        <span>75%</span>
                    </div>
                    <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px;">
                        <div style="width: 75%; height: 100%; background: var(--primary); border-radius: 4px;"></div>
                    </div>
                </div>

                <div style="margin-bottom: 16px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--text-primary);">
                        <span>技术问题</span>
                        <span>5/6</span>
                    </div>
                    <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px;">
                        <div style="width: 83%; height: 100%; background: var(--success); border-radius: 4px;"></div>
                    </div>
                </div>

                <div style="margin-bottom: 16px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--text-primary);">
                        <span>项目经验</span>
                        <span>2/3</span>
                    </div>
                    <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px;">
                        <div style="width: 67%; height: 100%; background: var(--warning); border-radius: 4px;"></div>
                    </div>
                </div>
            </div>

            <!-- 得分详情 -->
            <div class="card">
                <h3 class="card-title">得分详情</h3>
                
                <div class="info-row">
                    <span class="info-label">技术能力</span>
                    <span class="info-badge success">92分</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">表达能力</span>
                    <span class="info-badge">85分</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">逻辑思维</span>
                    <span class="info-badge warning">78分</span>
                </div>
                
                <div class="info-row">
                    <span class="info-label">项目经验</span>
                    <span class="info-badge success">90分</span>
                </div>

                <div style="border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px;">
                    <div class="info-row">
                        <span style="font-weight: 600; color: var(--text-primary);">综合得分</span>
                        <span class="info-badge" style="font-size: 16px; font-weight: 600;">88分</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI实时建议 -->
        <div class="feedback-tip" style="margin-top: 16px;">
            <span class="tip-icon">🤖</span>
            <div class="tip-content">
                <h3>AI实时建议</h3>
                <p style="margin-bottom: 8px;">您在技术问题回答上表现很好，建议在回答项目经验时：</p>
                <ul style="margin: 0; padding-left: 20px;">
                    <li>提供更多具体的数据支撑（如性能提升百分比、处理量级等）</li>
                    <li>说明解决方案的选择理由和对比</li>
                    <li>展示团队协作和leadership能力</li>
                </ul>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        // 快捷回复功能
        function insertQuickReply(text) {
            const chatInput = document.getElementById('chat-input');
            chatInput.value = text;
            chatInput.focus();
        }

        // 确认结束面试
        function confirmEndInterview() {
            if (confirm('确定要结束当前面试吗？结束后将生成面试报告。')) {
                showMessage('面试已结束，正在生成报告...', 'success');
                setTimeout(() => {
                    window.location.href = 'profile.html';
                }, 2000);
            }
        }

        // 面试计时器
        let interviewStartTime = Date.now();
        function updateTimer() {
            const elapsed = Math.floor((Date.now() - interviewStartTime) / 1000 / 60);
            document.getElementById('interview-timer').textContent = elapsed + '分钟';
        }
        setInterval(updateTimer, 60000); // 每分钟更新一次
    </script>
</body>
</html> 